<script setup lang="ts">
import AccountLoginForm from './account-login-form.vue'
import MobileLoginForm from './mobile-login-form.vue'
import { getTenderPath } from '@fl/utils/env'

const { push } = useRouter()

const activeForm = ref<number>(1)

function goToRegister() {
    push('/register')
}

function goToAdmin() {
    push('/admin-login')
}

function goToZc() {
    const url = getTenderPath()
    window.open(url, '_self')
    // window.open(`${import.meta.env.VITE_TENDER_PATH}`, '_self')
}
</script>

<template>
    <LoginLayout>
        <div class="login-form">
            <div class="absolute size-80 cursor-pointer right-0 top-0"
                 @click="goToAdmin"
            >
                <div class="b-l-80 b-t-80 b-transparent b-t-red b-solid absolute size-0 z-0" />

                <div class="text-14 text-white font-500 flex flex-col absolute right-10 top-10 z-100">
                    <span class="lh-12">运营</span>

                    <span>登录</span>
                </div>
            </div>

            <div class="form-container">
                <div class="tab">
                    <span :class="`cursor-pointer ${activeForm === 1 && 'active'}`"
                          @click="activeForm = 1"
                    >
                        密码登录
                    </span>

                    <span :class="`cursor-pointer ${activeForm === 2 && 'active'}`"
                          @click="activeForm = 2"
                    >
                        验证码登录
                    </span>
                </div>

                <div class="form-content">
                    <AccountLoginForm v-if="activeForm === 1" />

                    <MobileLoginForm v-else />

                    <div class="register">
                        没有账号？<span @click="goToRegister">立即注册</span>
                    </div>

                    <div class="link text-14 text-#165DFF text-center cursor-pointer"
                         @click="goToZc"
                    >
                        前往招采中心<span class="iconImg" />
                    </div>
                </div>
            </div>
        </div>
    </LoginLayout>
</template>

<style lang="scss" scoped>
@function toVw($px) {
    @return #{calc(#{$px} * 100 / 1920 * 1vw)};
}
@function toVh($px) {
    @return #{calc(#{$px} * 100 / 1080 * 1vh)};
}

.login-form {
    width: toVw(480);
    // height: toVh(588);
    background: #fff;
    margin-left: toVw(174);
    // margin-top: toVh(128);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    padding-bottom: toVh(60);
    align-items: center;
    .form-container {
        width: calc(100% - toVw(120));
        margin-top: toVh(60);
        .tab {
            span {
                font-size: toVh(22);
                display: inline-block;
                margin-right: toVw(40);
                &.active {
                    color: #da0004;
                    font-weight: 500;
                    border-bottom: 3px solid #da0004;
                }
            }
        }
        .form-content {
            margin-top: toVh(30);
            .register {
                text-align: center;
                font-size: 14px;
                color: #767676;
                margin-top: toVh(16);
                span {
                    color: #da0004;
                    cursor: pointer;
                }
            }
            .link {
                margin-top: toVh(20);
                .iconImg {
                    width: 8.5px;
                    height: 8.5px;
                    background: url('/arrow.png') no-repeat;
                    background-size: 100% 100%;
                    display: inline-block;
                    margin-left: toVw(4);
                }
            }
        }
    }
}
</style>
